<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
button{
margin-left: 19px;
margin-top: 10px;
background-color: blueviolet;
border: 0;
height: 30px;
width: 50px;
color: white;
border-radius: 10px;
}
</style>
<body>
    <h1>简易留言板</h1>
    <div class="wrapper">
        <ul id="words"></ul>
    </div>
    <textarea id="msg"></textarea><br>
    <button id="btn1">留言</button>
    <button id="btn2" "sum()">统计</button>
</body>
<script>
    var ul = document.getElementById('words');
    var msg = document.getElementById('msg');
    var btn1 = document.getElementById('btn1');
    var btn2 = document.getElementById('btn2');
    var liCount = 0;
    btn1.onclick=function(){
    if (!msg.value) {
        alert('留言板里没有内容')
    } else {
        var li = document.createElement('li');
        li.innerHTML = msg.value + '&nbsp;&nbsp;<span>X</span>';
        if (liCount == 0)
        {
            ul.appendChild(li);
            liCount++;
        }else {
            ul.insertBefore(li, ul.childNodes[0]);
            liCount++;
        }
        msg.value = '';
    }
        oSpans=document.getElementsByTagName('span');
        for(var i=0;i<oSpans.length;i++){
            oSpans[i].onclick=function(){
                ul.removeChild(this.parentNode);
                liCount--;
            }
        }
    };
    function sum(){
        alert('一共有'+liCount+'条信息');
    }

</script>

</html>